<!DOCTYPE HTML>
<html lang="en-US">
<head>
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
        <meta charset="UTF-8">
        <title>HTML-Recorder</title>
        <link href='http://fonts.googleapis.com/css?family=Economica' rel='stylesheet' type='text/css'>
  <link href='http://fonts.googleapis.com/css?family=Dancing+Script' rel='stylesheet' type='text/css'>
        <link rel="stylesheet" href="style2.css">
</head>
<body>
        <div id="recordBox">
        <div id="entrance">
      
        <span style="position: absolute; left: 100px; top: 45px;">Start Recording?</span>
        </div>        
        <div id="live" style="display: none; position: absolute; left: 20px;">   
        </div>
        <button id="recbutton">Rec</button>
        <button id="stopbutton">Stop</button>
                <button id="downloadbutton" onclick="saveAudio();">Download</button>
        </div>
        
<script src="recorder.js"></script>
<script src="main.js"></script>

<script type="text/javascript" >
$(function() {
  $("#recbutton").on("click", function() {
    $("#entrance").hide();
    $("#live").fadeIn("slow");
    toggleRecording(this);
    $(this).toggle();
    return $("#stopbutton").toggle();
  });
  return $("#stopbutton").on("click", function() {
    audioRecorder.stop();
    $(this).toggle();
    $("#recbutton").toggle();
    $("#live").hide();
    return $("#entrance").fadeIn("slow");
  });
});
</script>
       

</body>
</html>